<template>
    <tm-app class="app">
        <view
            style="position: fixed; top: 0; width: 750rpx; background: #fff"
            :style="{ height: systemInfo.statusBarHeight + 'px' }"
        ></view>

        <view
            class="selectBar d-flex"
            :style="{ top: systemInfo.statusBarHeight + 'px' }"
        >
            <view class="left_box" @tap="goBack">
                <image src="/static/center/back.png" class="back"></image>
            </view>

            <view class="dotTab1 d-flex d-r a-center">
                <view
                    class="active_tab_bg d-flex d-r a-center j-center"
                    :class="{
                        active: activeTab === 'quanzi',
                    }"
                >
                    <view class="linear"></view>
                </view>

                <view
                    class="tab d-flex a-center j-center"
                    @tap="activeTab = 'friend'"
                    :class="{ active: activeTab === 'friend' }"
                >
                    <text
                        class="text"
                        :class="{ active: activeTab === 'friend' }"
                        >找好友</text
                    >
                </view>
                <view
                    class="tab d-flex a-center j-center"
                    @tap="activeTab = 'quanzi'"
                    :class="{ active: activeTab === 'quanzi' }"
                    ><text
                        class="text"
                        :class="{ active: activeTab === 'quanzi' }"
                        >找群</text
                    >
                    <!-- <text style="font-size:40rpx;color:red;" class="icon">&#xe769;</text> -->
                </view>
            </view>
        </view>

        <view
            v-show="activeTab === 'friend'"
            class="search_box d-flex a-center j-between"
            :style="{ top: `calc(100rpx + ${systemInfo.statusBarHeight}px)` }"
        >
            <view class="search d-flex a-center">
                <image
                    style="width: 30rpx; height: 30rpx"
                    src="/static/nvue/search.png"
                    mode=""
                />
                <input
                    type="number"
                    confirm-type="search"
                    @confirm="query"
                    class="inp"
                    placeholder-style="color:#ccc;font-size:30rpx;"
                    placeholder="胖友ID/手机号"
                    v-model="queryText"
                />
            </view>

            <view class="text_btn d-flex a-center" @tap="query"> 查找 </view>
        </view>


        <view v-show="activeTab === 'quanzi'" class="search_box d-flex a-center j-between" :style="{ top: `calc(100rpx + ${systemInfo.statusBarHeight}px)` }">
            <view class="search d-flex a-center">
                <image
                    style="width: 30rpx; height: 30rpx"
                    src="/static/nvue/search.png"
                    mode=""
                />
                <input
                    type="text"
                    class="inp"
                    confirm-type="search"
                    @confirm="query1"
                    placeholder-style="color:#ccc;font-size:30rpx;"
                    placeholder="群ID"
                    v-model="queryText1"
                />
            </view>

            <view class="text_btn d-flex a-center" @tap="query1"> 查找 </view>
        </view>


        <!-- transform: `translateX(${content1translateX}px)` -->

        <scroll-view
            v-show="activeTab==='friend'"
            :scroll-y="true"
            class="content"
            :style="{ top: `calc(220rpx + ${systemInfo.statusBarHeight}px)`}"
        >
            <view
                class="row d-flex a-center"
                v-for="item in userList"
                @tap="goApplayForFriend(item)"
            >
                <view class="head d-flex d-c a-center">
                    <userhead
                        width="100"
                        height="100"
                        :saveKey="item.id"
                        :isVip="item.isVip"
                        :src="item.photo"
                    />
                </view>
                <view class="name" :class="{ isVip: !!item.isVip }">{{
                    item.nickName
                }}</view>
            </view>
        </scroll-view>


        <scroll-view
            v-show="activeTab==='quanzi'"
            :scroll-y="true"
            class="content"
            :style="{ top: `calc(220rpx + ${systemInfo.statusBarHeight}px)`}"
        >
            <view class="nodata" v-show="searched1 && !state.circleList.length">
                <image class="nodata-img" src="/static/img/nodata.png" alt="" />

                <view class="text">竟然什么都没有~</view>
            </view>

            <view
                class="water_card d-flex d-c"
                v-show="state.circleList.length"
                v-for="(circle, index) in state.circleList"
                @tap="goDetail(circle)"
            >
                <view class="img_box psr">
                    <image class="img" :src="circle.photo" mode="aspectFill" />
                    <view
                        class="dot d-flex a-center j-center"
                        :class="[getDotType(circle)]"
                    >
                        <text class="text">{{ circle.labelName }}</text>
                    </view>
                </view>
                <view class="title d-flex d-r a-center j-between">
                    <view class="circle_name d-flex d-r a-center ell">
                        <text class="text ell">{{ circle.name }}</text>
                    </view>

                    <view class="d-flex d-r a-center">
                        <text class="icon">&#xe7c1;</text>
                        <text class="memberCount">{{
                            circle.currentUserCount
                        }}</text>
                    </view>
                </view>
                <view class="newLables d-flex d-r">
                    <view
                        class="label"
                        v-for="tag in circle.tags"
                        :class="TAGS_CLASS_MAP[tag]"
                    >
                        <text class="text">{{ TAGS_TEXT_MAP[tag] }}</text>
                    </view>
                </view>

                <view class="introduction">
                    <text class="text">{{ circle.introduction2 }}</text>
                </view>
            </view>
        </scroll-view>
    </tm-app>
</template>
<script lang="ts" setup>
import { ref,reactive,computed } from "vue";
import {
    onReady,
    onShow,
    onHide,
    onLoad,
    onUnload,
    onPageScroll,
} from "@dcloudio/uni-app";
import { systemInfo as systemInfoStore } from "@/store/systemInfo";
import { queryUser,getCircleList } from "@/api/api";
import cacheimg from "@/components/cacheimg.vue";
import userhead from "@/components/userhead.vue";
import { userData as userDataStore } from "@/store/userData";
import { systemConfig as systemConfigStore } from "@/store/systemConfig";
const systemConfig: any = systemConfigStore();


const activeTab = ref('friend')

const content1translateX = computed(() => {
    if (activeTab.value === "quanzi") {
        return -uni.upx2px(750);
    }

    return 0;
});

const content2translateX = computed(() => {
    if (activeTab.value === "quanzi") {
        return 0;
    }

    return uni.upx2px(750);
});



const userData = userDataStore();

const systemInfo: any = systemInfoStore();
//10000013
const queryText = ref("");
const userList = ref([]);
const query = async () => {
    if (!queryText.value) {
        uni.showToast({
            icon: "none",
            title: "请输入胖友ID或手机号",
            duration: 1500,
        });
        return;
    }
    const res: any = await queryUser({ queryParam: queryText.value });
    const { flag, data } = res;

    console.log(res);

    if (flag !== 1) {
        uni.showToast({
            icon: "none",
            title: "查询失败，请稍后再试",
            duration: 1500,
        });

        return;
    }

    if (!data.list.length) {
        uni.showToast({
            icon: "none",
            title: "未找到用户",
            duration: 1500,
        });
    }

    userList.value = data.list;
};

const goApplayForFriend = (user: any) => {

    uni.navigateTo({
        url: `/pages/personalCenter/userSimple?userId=${user.id}&source=Search`,
    });
};

const goBack = () => {
    uni.navigateBack();
};

////////quanzi////////////////////////////////////////////////////////////////////////////////////////

const queryText1 = ref("");
const state: any = reactive({
    circleList: [],
});

const goDetail = (circle: any) => {
    const { groupId } = circle;
    uni.navigateTo({
        url: `/pages/discover/discoverDetail?groupId=${groupId}`,
    });
};

const searched1 = ref(false);

const getDotType = (circle: any) => {
    if (!systemConfig.groupTag) {
        return "";
    }

    if (!systemConfig.groupTag.length) {
        return "";
    }

    if (circle.labelName === systemConfig.groupTag[0].slimValue) {
        return "shadow0";
    }

    if (circle.labelName === systemConfig.groupTag[1].slimValue) {
        return "shadow1";
    }

    if (circle.labelName === systemConfig.groupTag[2].slimValue) {
        return "shadow2";
    }

    if (circle.labelName === systemConfig.groupTag[3].slimValue) {
        return "shadow3";
    }

    if (circle.labelName === systemConfig.groupTag[4].slimValue) {
        return "shadow4";
    }
};

const TAGS_TEXT_MAP = ref({
    1: "千人好评",
    2: "五百好评",
    3: "百人好评",
    4: "同城",
    5: "实名认证",
    6: "游客开启",
    7: "免费",
    8: "新群",
    9: "人气",
});

const TAGS_CLASS_MAP = ref({
    1: "hp",
    2: "hp",
    3: "hp",
    4: "tc",
    5: "smrz",
    6: "yk",
    7: "mf",
    8: "xq",
    9: "rq",
});

const calcTags = (row: any) => {
    let tags = [];
    const {
        appraiseCount,
        isSameCity,
        isRealName,
        isVisitor,
        isPay,
        createTime,
    } = row;

    if (appraiseCount >= 1000) {
        tags.push(1);
    }
    if (500 <= appraiseCount && appraiseCount < 1000) {
        tags.push(2);
    }
    if (100 <= appraiseCount && appraiseCount < 500) {
        tags.push(3);
    }

    if (isSameCity) {
        tags.push(4);
    }

    if (isRealName) {
        tags.push(5);
    }

    if (isVisitor) {
        tags.push(6);
    }

    if (!isPay) {
        tags.push(7);
    }
    if (createTime) {
        const now = new Date().getTime();
        const createTimeStr = new Date(createTime).getTime();

        if (now - createTimeStr < 1209600) {
            tags.push(8);
        }
    }

    return tags.slice(0, 3);
};

const query1 = async () => {
    if (!queryText1.value) {
        uni.showToast({
            icon: "none",
            title: "请输入群ID",
            duration: 1500,
        });
        return;
    }

    const res: any = await getCircleList({
        queryParam: queryText1.value,
        groupType: 3,
    });
    const { flag, data } = res;
    if (flag !== 1) {
        uni.showToast({
            icon: "none",
            title: "查询失败，请稍后再试",
            duration: 1500,
        });
        return;
    }

    searched1.value = true;

    if (!data.list.length) {
        uni.showToast({
            icon: "none",
            title: "未找到群",
            duration: 1500,
        });
        searched1.value = false;
    }

    const arr = data.list.map((item: any) => {
        return {
            ...item,
            type: "normal",
            tags: calcTags(item),
            labels: item.label.split(","),
        };
    });

    state.circleList = arr;
};

onLoad((option: any) => {
    if(option.active){
        activeTab.value = option.active;
    }
});


</script>
<style lang="scss" scoped>
.selectBar {
    position: fixed;
    top: 0;
    left: 0;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 750rpx;
    height: 100rpx;
    background: #fff;
    .left_box{
        position:absolute;
        top: 50%;
        transform: translateY(-50%);
        left:20rpx;
        display: flex;
        min-width:50rpx;
        align-items: center;
        justify-content: flex-start;
        .back{
            width:48rpx;
            height:48rpx;
        }
    }

    .dotTab1 {
        position: relative;
        width: 360rpx;
        height: 100rpx;

        .active_tab_bg {
            position: absolute;
            top: 38rpx;
            left: 0;
            width: 180rpx;
            height: 52rpx;
            // background: linear-gradient(270deg, rgba(73,243,210,0) 0%, #23E2A6 100%);
            transition: left 0.15s linear;
            .linear {
                width: 130rpx;
                height: 26rpx;
                background: linear-gradient(
                    270deg,
                    #fff 0%,
                    #23e2a6 100%
                );
                border-radius: 13rpx;
            }
            &.active {
                left: 180rpx;
            }
        }
        .tab {
            z-index: 5;
            top: 0;
            width: 180rpx;
            height: 100rpx;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            .text {
                color: #999999;
                font-size: 34rpx;
                font-weight: bold;
                &.active {
                    font-size: 40rpx;
                    color: #333;
                }
            }
        }
    }
}


.app {
    .header {
        position: fixed;
        width: 750rpx;
        z-index: 100;
        top: 0;
        left: 0;
        padding: 0 30rpx;
        display: flex;
        height: 100rpx;
        align-items: center;
        justify-content: space-between;
        height: 100rpx;
        // position: absolute;
        // top: 0;
        // left: 0;
        width: 750rpx;
        background-color: #ffffff;

        .right {
            width: 48rpx;
            height: 48rpx;
        }

        .firend {
            font-size: 34rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 600;
            color: #000000;
        }
    }

    .search_box {
        width: 750rpx;
        position: fixed;
        background: #fff;
        padding: 20rpx 30rpx;
        height: 100rpx;

        .search {
            width: 600rpx;
            height: 70rpx;
            border-radius: 10rpx;
            background: #f5f5f5;
            padding: 0 30rpx;

            .inp {
                width: 500rpx;
                margin-left: 20rpx;
                font-size: 30rpx;
            }
        }

        .text_btn {
            text-align: right;
            color: #1dc691;

            &:active {
                opacity: 0.7;
            }
        }
    }

    .content {
        position: absolute;
        width: 750rpx;
        bottom: 0;
        left: 0;
        background: #f5f5f5;
        padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
        padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
        transition: transform 0.15s linear;


        .row {
            width: 750rpx;
            padding: 0 30rpx;
            height: 140rpx;
            background:#fff;

            &:active {
                background: #f5f5f5;
            }

            .head {
                position: relative;
                width: 100rpx;
                height: 100rpx;

                .img {
                    width: 100rpx;
                    height: 100rpx;
                    border-radius: 50%;
                }

                .vip {
                    position: absolute;
                    width: 97rpx;
                    height: 43rpx;
                    z-index: 5;
                    bottom: -10rpx;
                }
            }

            .name {
                margin-left: 20rpx;

                &.isVip {
                    color: #f19945;
                }
            }
        }


        .water_card {
            width: 339rpx;
            background: #fff;
            border-radius: 20rpx;
            margin-bottom: 10rpx;
            overflow: hidden;
            padding-bottom: 20rpx;
            margin-left:20rpx;
            .dot {
                position: absolute;
                bottom: 0;
                left: 0;
                z-index: 10;
                width: 110rpx;
                height: 40rpx;
                opacity: 0.9;
                border-top-right-radius: 20rpx;
                .text {
                    font-size: 20rpx;
                    color: #fff;
                }
                &.shadow0 {
                    background: #1dc691;
                }
                &.shadow1 {
                    background: #ff9f26;
                }
                &.shadow2 {
                    background: #905ade;
                }
                &.shadow3 {
                    background: #4c7dfe;
                }
                &.shadow4 {
                    background: #ad3569;
                }
            }
            .img_box {
                position: relative;
                width: 336rpx;
                height: 336rpx;
                border-top-left-radius: 20rpx;
                border-top-right-radius: 20rpx;
            }
            .img {
                width: 336rpx;
                height: 336rpx;
                border-top-left-radius: 20rpx;
                border-top-right-radius: 20rpx;
            }
            .title {
                padding: 0 12rpx;
                height:42rpx;
                margin-top: 15rpx;
                margin-bottom: 15rpx;
                .circle_name {
                    display:flex;
                    flex:1;
                    .text {
                        flex:1;
                        font-size: 30rpx;
                        color: #333;
                        font-weight: 600;
                    }
                }
                .icon {
                    font-size: 36rpx;
                    color: #ccc;
                    margin-right:5rpx;
                }
                .memberCount {
                    color: #999;
                    font-size: 24rpx;
                }
            }
            .newLables {
                padding: 0 12rpx;
                flex-wrap: wrap;
                margin-bottom: 15rpx;
                .label {
                    padding: 3rpx 5rpx;
                    border-radius: 4rpx;
                    margin-right: 6rpx;
                    margin-bottom: 6rpx;
                    .text {
                        font-size: 20rpx;
                    }
                    &.hp {
                        background: #ffe7cf;
                        .text {
                            color: #f48c29;
                        }
                    }
                    &.smrz {
                        background: #d4edff;
                        .text {
                            color: #418aff;
                        }
                    }
                    &.rq {
                        background: #ffdfdb;
                        .text {
                            color: #e55b2e;
                        }
                    }
                    &.xq {
                        background: #e6dcff;
                        .text {
                            color: #6f5ade;
                        }
                    }
                    &.tc {
                        background: #f4dcff;
                        .text {
                            color: #905ade;
                        }
                    }
                    &.mf {
                        background: #d2f4e9;
                        .text {
                            color: #1dc691;
                        }
                    }
                    &.yk {
                        background: #fcebda;
                        .text {
                            color: #f19945;
                        }
                    }
                }
            }

            .introduction {
                padding: 0 12rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                lines: 3;
                .text {
                    font-size: 24rpx;
                    color: #666;
                    line-height: 31rpx;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    lines: 3;
                }
            }
        }
    }
}
</style>    